<template>
  <el-form
    @submit.native.prevent="saveUser"
    ref="form"
    :model="users"
    label-width="80px"
    :rules="rules"
  >
    <el-form-item label="用户名">
      <el-input prefix-icon="el-icon-user" v-model="users.username" disabled></el-input>
    </el-form-item>

    <el-form-item label="密码">
      <el-input
        prefix-icon="el-icon-lock"
        :type="pwdType"
        v-model="users.password"
        ><i slot="suffix" class="el-icon-view" @click="showPwd"></i
      ></el-input>
    </el-form-item>

    <el-form-item label="角色信息">
          <el-select v-model="currentrole" filterable placeholder="请选择角色信息">
            <el-option v-for="item in roles" :value="item.rname" :key="item.rid"/>
          </el-select>
      </el-form-item>

    <el-form-item label="电话号码">
      <el-input prefix-icon="el-icon-mobile-phone" v-model="users.mobile"></el-input>
    </el-form-item>

    <el-form-item label="邮箱">
      <el-input prefix-icon="el-icon-message" v-model="users.email"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" native-type="submit">立即修改</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
export default {
  name: "editUsers",
  data() {
    return {
      users:{},
      currentrole:'',
      roles:[],
      pwdType: "password",
      rules: {
        userPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, message: "密码不能小于3位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    saveUser() {
      this.$http.put(`userList/${this.$route.params.id}`,{
            password:this.users.password,
            email:this.users.email,
            mobile:this.users.mobile,
            roles:this.currentrole
        })
        .then(res => {
          console.log(res.data.meta.status);
          if(res.data.meta.status!=200){
              this.$message({
              message: "修改失败！",
              type: "error",
            });
          }
          else{
              this.$message({
              message: "修改成功！",
              type: "success",
            });
            this.$router.push("/main/userList");
          }
             
        });
    },
    fetch() {
      // console.log(1)
      this.$http.get(`userList/${this.$route.params.id}`).then(res => {
        this.users = res.data[0];
        this.currentrole=this.users.rname
      });
      this.$http.get('roleList').then(res=>{
        this.roles=res.data.result;
        
      })
    },
    // 显示隐藏密码
    showPwd() {
      this.pwdType === "password"
        ? (this.pwdType = "")
        : (this.pwdType = "password");
      let e = document.getElementsByClassName("el-icon-view")[0];
      this.pwdType == ""
        ? e.setAttribute("style", "color:#409EFF")
        : e.setAttribute("style", "color:#c0c4cc");
    },
  },
  created() {
    this.fetch();
  },
};
</script>